<template>
  <view class="edit-profile-page">
    <!-- 主要内容区域 -->
    <scroll-view class="content-scroll" scroll-y>
      <!-- 个人信息卡片 -->
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">个人信息</text>
          <text class="card-subtitle">请填写真实的个人信息</text>
        </view>
        
        <!-- 用户昵称输入 -->
        <view class="input-group">
          <view class="input-label">
            <text class="label-text">用户昵称</text>
            <text class="required-mark">*</text>
          </view>
          <view class="input-wrapper" :class="{ 'error': nickNameError, 'focused': nickNameFocused }">
            <input 
              class="modern-input"
              v-model="user.nickName"
              placeholder="请输入用户昵称"
              maxlength="20"
              @focus="nickNameFocused = true"
              @blur="handleNickNameBlur"
            />
          </view>
          <text v-if="nickNameError" class="error-message">{{ nickNameError }}</text>
        </view>

        <!-- 手机号码输入 -->
        <view class="input-group">
          <view class="input-label">
            <text class="label-text">手机号码</text>
            <text class="required-mark">*</text>
          </view>
          <view class="input-wrapper" :class="{ 'error': phoneError, 'focused': phoneFocused }">
            <input 
              class="modern-input"
              v-model="user.phonenumber"
              placeholder="请输入手机号码"
              type="number"
              maxlength="11"
              @focus="phoneFocused = true"
              @blur="handlePhoneBlur"
            />
          </view>
          <text v-if="phoneError" class="error-message">{{ phoneError }}</text>
        </view>

        <!-- 邮箱输入 -->
        <view class="input-group">
          <view class="input-label">
            <text class="label-text">邮箱地址</text>
            <text class="required-mark">*</text>
          </view>
          <view class="input-wrapper" :class="{ 'error': emailError, 'focused': emailFocused }">
            <input 
              class="modern-input"
              v-model="user.email"
              placeholder="请输入邮箱地址"
              type="email"
              @focus="emailFocused = true"
              @blur="handleEmailBlur"
            />
          </view>
          <text v-if="emailError" class="error-message">{{ emailError }}</text>
        </view>

        <!-- 性别选择 -->
        <view class="input-group">
          <view class="input-label">
            <text class="label-text">性别</text>
            <text class="required-mark">*</text>
          </view>
          <view class="gender-options">
            <view 
              class="gender-option" 
              :class="{ 'active': user.sex === '0' }"
              @click="selectGender('0')"
            >
              <text class="gender-text">👨 男</text>
            </view>
            <view 
              class="gender-option" 
              :class="{ 'active': user.sex === '1' }"
              @click="selectGender('1')"
            >
              <text class="gender-text">👩 女</text>
            </view>
          </view>
          <text v-if="sexError" class="error-message">{{ sexError }}</text>
        </view>
      </view>

      <!-- 底部间距 -->
      <view class="bottom-space"></view>
    </scroll-view>

    <!-- 保存按钮 -->
    <view class="save-container">
      <button 
        class="save-button" 
        :class="{ 'disabled': !isFormValid }"
        @click="submit"
        :disabled="!isFormValid"
      >
        <text class="save-text">保存修改</text>
      </button>
    </view>
  </view>
</template>

<script>
  import { getUserProfile } from "@/api/system/user"
  import { updateUserProfile } from "@/api/system/user"

  export default {
    data() {
      return {
        user: {
          nickName: "",
          phonenumber: "",
          email: "",
          sex: ""
        },
        // 焦点状态
        nickNameFocused: false,
        phoneFocused: false,
        emailFocused: false,
        
        // 错误信息
        nickNameError: '',
        phoneError: '',
        emailError: '',
        sexError: ''
      }
    },
    
    computed: {
      // 表单验证状态
      isFormValid() {
        return this.user.nickName && 
               this.user.phonenumber && 
               this.user.email && 
               this.user.sex &&
               !this.nickNameError && 
               !this.phoneError && 
               !this.emailError && 
               !this.sexError;
      }
    },
    
    onLoad() {
      this.getUser()
    },
    
    methods: {
      // 获取用户信息
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data
        })
      },
      
      // 昵称失焦验证
      handleNickNameBlur() {
        this.nickNameFocused = false;
        this.validateNickName();
      },
      
      // 手机号失焦验证
      handlePhoneBlur() {
        this.phoneFocused = false;
        this.validatePhone();
      },
      
      // 邮箱失焦验证
      handleEmailBlur() {
        this.emailFocused = false;
        this.validateEmail();
      },
      
      // 验证昵称
      validateNickName() {
        if (!this.user.nickName) {
          this.nickNameError = '用户昵称不能为空';
          return false;
        }
        if (this.user.nickName.length < 2) {
          this.nickNameError = '昵称至少需要2个字符';
          return false;
        }
        this.nickNameError = '';
        return true;
      },
      
      // 验证手机号
      validatePhone() {
        if (!this.user.phonenumber) {
          this.phoneError = '手机号码不能为空';
          return false;
        }
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(this.user.phonenumber)) {
          this.phoneError = '请输入正确的手机号码';
          return false;
        }
        this.phoneError = '';
        return true;
      },
      
      // 验证邮箱
      validateEmail() {
        if (!this.user.email) {
          this.emailError = '邮箱地址不能为空';
          return false;
        }
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(this.user.email)) {
          this.emailError = '请输入正确的邮箱地址';
          return false;
        }
        this.emailError = '';
        return true;
      },
      
      // 验证性别
      validateSex() {
        if (!this.user.sex) {
          this.sexError = '请选择性别';
          return false;
        }
        this.sexError = '';
        return true;
      },
      
      // 选择性别
      selectGender(value) {
        this.user.sex = value;
        this.validateSex();
      },
      
      // 验证所有字段
      validateAllFields() {
        const isNickNameValid = this.validateNickName();
        const isPhoneValid = this.validatePhone();
        const isEmailValid = this.validateEmail();
        const isSexValid = this.validateSex();
        
        return isNickNameValid && isPhoneValid && isEmailValid && isSexValid;
      },
      
      // 提交表单
      submit() {
        if (!this.validateAllFields()) {
          uni.showToast({
            title: '请完善个人信息',
            icon: 'none',
            duration: 2000
          });
          return;
        }
        
        // 显示加载状态
        uni.showLoading({
          title: '保存中...'
        });
        
        updateUserProfile(this.user).then(response => {
          uni.hideLoading();
          uni.showToast({
            title: '修改成功',
            icon: 'success',
            duration: 1500
          });
          
          // 延迟返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }).catch(error => {
          uni.hideLoading();
          uni.showToast({
            title: '修改失败，请重试',
            icon: 'none',
            duration: 2000
          });
        });
      }
    }
  }
</script>

<style scoped>
/* 页面容器 */
.edit-profile-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #F8FAFE 0%, #F2F6FC 100%);
  display: flex;
  flex-direction: column;
}



/* 内容滚动区域 */
.content-scroll {
  flex: 1;
  padding: 16rpx 32rpx 0;
}

/* 信息卡片 */
.info-card {
  background: #FFFFFF;
  border-radius: 24rpx;
  margin-bottom: 16rpx;
  padding: 32rpx 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid rgba(74, 144, 226, 0.08);
}

/* 卡片头部 */
.card-header {
  margin-bottom: 32rpx;
}

.card-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1A1A1A;
  display: block;
  margin-bottom: 8rpx;
}

.card-subtitle {
  font-size: 28rpx;
  color: #8A8A8A;
  display: block;
}

/* 输入组 */
.input-group {
  margin-bottom: 24rpx;
}

.input-group:last-child {
  margin-bottom: 0;
}

/* 输入标签 */
.input-label {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.label-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
}

.required-mark {
  font-size: 32rpx;
  color: #FF6B6B;
  margin-left: 8rpx;
}

/* 现代化输入框 */
.input-wrapper {
  position: relative;
  background: #F8FAFE;
  border: 2rpx solid #E8F2FF;
  border-radius: 16rpx;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-wrapper.focused {
  background: #FFFFFF;
  border-color: #4A90E2;
  box-shadow: 0 0 0 6rpx rgba(74, 144, 226, 0.1);
}

.input-wrapper.error {
  border-color: #FF6B6B;
  background: #FFF8F8;
}

.modern-input {
  width: 100%;
  height: 96rpx;
  padding: 0 24rpx;
  font-size: 32rpx;
  color: #1A1A1A;
  background: transparent;
  border: none;
  outline: none;
}

.modern-input::placeholder {
  color: #B8B8B8;
}

/* 性别选择 */
.gender-options {
  display: flex;
  gap: 16rpx;
}

.gender-option {
  flex: 1;
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F8FAFE;
  border: 2rpx solid #E8F2FF;
  border-radius: 16rpx;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.gender-option:active {
  transform: scale(0.98);
}

.gender-option.active {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  border-color: #4A90E2;
  box-shadow: 0 4rpx 16rpx rgba(74, 144, 226, 0.3);
}

.gender-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
}

.gender-option.active .gender-text {
  color: #FFFFFF;
}

/* 错误信息 */
.error-message {
  font-size: 26rpx;
  color: #FF6B6B;
  margin-top: 12rpx;
  display: block;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 底部间距 */
.bottom-space {
  height: 40rpx;
}

/* 保存按钮容器 */
.save-container {
  padding: 16rpx 32rpx 24rpx;
  background: #FFFFFF;
  border-top: 1rpx solid #F0F0F0;
}

/* 保存按钮 */
.save-button {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  border-radius: 24rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(74, 144, 226, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.save-button:active {
  transform: scale(0.98);
}

.save-button.disabled {
  background: #E0E0E0;
  box-shadow: none;
  transform: none;
}

.save-text {
  font-size: 36rpx;
  font-weight: 600;
  color: #FFFFFF;
}

.save-button.disabled .save-text {
  color: #A0A0A0;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .content-scroll {
    padding: 20rpx 24rpx 0;
  }
  
  .info-card {
    padding: 32rpx 24rpx;
    margin-bottom: 20rpx;
  }
  
  .card-title {
    font-size: 32rpx;
  }
  
  .card-subtitle {
    font-size: 26rpx;
  }
  
  .label-text {
    font-size: 30rpx;
  }
  
  .modern-input,
  .gender-text {
    font-size: 30rpx;
  }
  
  .save-container {
    padding: 20rpx 24rpx 32rpx;
  }
  
  .save-button {
    height: 88rpx;
  }
  
  .save-text {
    font-size: 32rpx;
  }
}
</style>
